<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<!-- <image src="../../../static/wode/return.png" mode=""></image> -->
				<text>取消</text>
			</view>
			<view class="head_mid">
				讨论组设置
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="padding-box">
			<view class="body-item">
				<text>讨论组名称</text>
				<text>捱三顶五</text>
			</view>
			<view class="body-item">
				<text>使用语言</text>
				<view class="body-right">
					<text>请选择</text>
					<image src="../../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="body-item ">
				<text>标签</text>
				<view class="body-right">
					<text>请选择</text>
					<image src="../../../static/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="margin-box body-item2">
			<view class="">
				类别
			</view>
			<view class="type-box">
				<view class="type-item" v-for="(item,index) in typeList" :key="index" :class="{active:index==typeIndex}" @tap="chooseIndex(index)">
					{{item}}
				</view>
			</view>
		</view> -->
		<view class="margin-box gongGaoBox">
			<view class="">
				公告
			</view>
			<textarea class="gongGao" value="" placeholder="群公告" maxlength='40' v-model="textInput" @input="descInput" />
			<view class="remnant" v-text="remnant">/40</view>
		</view>
		<view class="margin-box body-item">
			<text>公开</text>
			<switch checked @change="switch1Change" />
		</view>
		<view class="body-item" v-if="isOpen==false">
			<text>设置密码</text>
			<input class="passText" type="text" value="" placeholder="请输入" />
		</view>
		<view class="margin-box body-item">
			<text>是否收费</text>
			<switch checked @change="switch2Change" />
		</view>
		<view class="body-item">
			<text>猫币/人</text>
			<view class="number-select common">
				<view class="border-box" @tap="reduce">
					<view class="left-box"></view>
				</view>
				<input class="center-box" type="text" v-model="number" @input="seletInput" />
				<view class="border-box" @tap="add">
					<view class="right-box"></view>
				</view>
			</view>
		</view>
		<!-- <view class="shuoming">说明：创建普通语音房间不需要消耗猫币，创建在线语音或在线视频房间则需要消耗100猫币，在该房间所获得收益，平台将收取30%的管理费</view> -->
		<view class="btn">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: ['普通语音', '在线语音', '在线视频', '语音直播', '视频直播'],
				numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '不限'],
				typeIndex: 0,
				number: 0,
				isOpen: true,
				showNumList: false,
				remnant:0,//公告字数
				textInput:'',//公告
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			chooseIndex(index) {
				this.typeIndex = index
			},
			switch1Change: function(e) { //选择是否公开
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
				this.isOpen = e.target.value
			},
			seletInput() {
				var containSpecial = RegExp(
					/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)(\u4e00-\u9fa5)(A-Za-z)]+/
				);
				if (containSpecial.test(this.number) == true || this.number == "") {
					this.showbtn = false;
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
					this.number = 0;
				}
			},
			reduce() { //减
				if (this.number == 10) {
					uni.showToast({
						title: '不能再减啦！',
						icon: 'none'
					})
				} else {
					this.number--
				}
			},
			add() { //加
				this.number++
			},
			descInput() { //控制输入框输入字数
				this.remnant = this.textInput.length
			},
			chooseNumber() { //显示人数列表
				if (this.showNumList == false) {
					this.showNumList = true
				} else {
					this.showNumList = false
				}
			},
			chooseNum(item) { //选择人数
				this.peopleNum = item
			},
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
	}

	.head_left {
		height: 82upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;
		padding-top: 70upx;
	}

	.head_mid {
		padding-top: 90upx;
	}

	.head_right {
		width: 64upx;
	}

	.padding-box {
		padding-top: 182upx;
	}

	.body-item {
		background: #FFFFFF;
		padding: 0 24upx;
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		font-size: 32upx;
		/* font-weight: 400; */
	}

	.body-item image {
		width: 16upx;
		height: 28upx;
		margin-left: 30upx;
	}

	.body-right {
		font-size: 28upx;
		color: #999999;
		/* font-weight: 100; */
	}

	.margin-box {
		margin-top: 20upx;
	}

	.body-item2 {
		font-size: 32upx;
		color: #333333;
		/* font-weight: bold; */
		background: #FFFFFF;
		padding: 15upx 24upx;
	}
	.passText{
		text-align: right; 
	}

	.type-box {
		display: flex;
		flex-wrap: wrap;
	}

	.type-item {
		width: 140upx;
		height: 58upx;
		text-align: center;
		line-height: 58upx;
		color: #666666;
		font-size: 26upx;
		border-radius: 29upx;
		border: 1upx solid #E6E6E6;
		margin: 24upx 46upx;
		/* font-weight: 100; */
	}

	.active {
		color: #FFFFFF;
		background: linear-gradient(-90deg, rgba(50, 242, 226, 1), rgba(50, 226, 242, 1));
		border: 1upx solid #FFFFFF;
	}

	.number-select {
		width: 170upx;
		height: 48upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(230, 230, 230, 1);
		border-radius: 10upx;
	}

	/*加号*/
	.right-box {
		display: inline-block;
		background: rgba(153, 153, 153, 1);
		height: 24upx;
		position: relative;
		width: 2upx;
	}

	.right-box::after {
		background: rgba(153, 153, 153, 1);
		content: "";
		height: 24upx;
		left: 0;
		position: absolute;
		top: 0;
		width: 2upx;
		transform: rotateZ(90deg)
	}

	.center-box {
		width: 40%;
		height: 100%;
		color: rgba(51, 51, 51, 1);
		font-size: 24upx;
		border-left: 1upx solid rgba(230, 230, 230, 1);
		border-right: 1upx solid rgba(230, 230, 230, 1);
		text-align: center;
	}

	.border-box {
		width: 29.9%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
	}

	/*减号*/
	.left-box {
		display: inline-block;
		background: rgba(153, 153, 153, 1);
		height: 24upx;
		position: relative;
		width: 2upx;
		transform: rotateZ(90deg);
		text-align: center;
		line-height: 48upx;
	}

	.shuoming {
		font-size: 22upx;
		color: #999999;
		padding: 38upx 24upx;
	}

	.peopleNum-box {
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 20upx 24upx 0 24upx;
	}

	.peopleNum {
		background: #FFFFFF;
		border: 1upx solid #E6E6E6;
		width: 170upx;
		height: 48upx;
		border-radius: 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.peopleNum text {
		margin-left: 56upx;
	}

	.peopleNum image {
		width: 26upx;
		height: 15upx;
		margin-right: 20upx;
	}

	.btn {
		margin-top: 60upx;
		margin-bottom: 60upx;
	}

	.numListBox {
		position: absolute;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border: 1upx solid #E6E6E6;
		border-radius: 10upx;
		align-items: center;
		line-height: 60upx;
		right: 100upx;
		top: 355upx;
	}

	.numListItem {
		border-bottom: 1upx solid #E6E6E6;
		padding: 0upx 20upx;
		color: #333333;
		font-size: 28upx;
	}
	.gongGaoBox{
		background: #FFFFFF;
		padding: 30upx 24upx;
		position: relative;
	}
	.gongGao{
		background: #F7F7F7;
		color: #333333;
		font-size: 28upx;
		width: 100%;
		padding: 24upx;
		box-sizing: border-box;
		margin-top: 10upx;
		height: 120upx;
	}
	.remnant {
		font-size: 26upx;
		color: rgba(153, 153, 153, 1);
		position: absolute;
		bottom: 30upx;
		right: 30upx;
	}
</style>
